<template>
  <BoTable
    ref="tableRef"
    :columns="columns"
    :request="fetchList"
    :row-selection="rowSelection"
    row-key="projectId"
  >
    <template #toolbars>
      <Space>
        <Button @click="onAdd">新增</Button>
        <Button @click="onDelete(rowSelection.selectedRowKeys)"
          >删除</Button
        ></Space
      >
    </template>
  </BoTable>

  <FormModal :columns="items"></FormModal>
</template>

<route lang="json">
{
  "meta": {
    "title": "项目管理"
  }
}
</route>
<script setup lang="tsx">
import { computed, reactive, ref, shallowRef } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { listToOption } from '@boeyo/shared';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Modal, Space } from 'ant-design-vue';
import ImagePreview from '@/components/ImagePreview/index.vue';
import LonLat from '@/components/LonLat/index.vue';
import {
  fetchLevelConfigList,
  fetchList,
  projectAdd,
  projectDelete,
  projectUpdate,
  uploadFile,
} from './api';

const { useStatusEnum, useStatusOptions, projectTypeOptions } = useDicts([
  'use_status',
  'project_type',
  'architectural_type',
]);

const levelConfigOptions = ref([]);

fetchLevelConfigList().then((res) => {
  levelConfigOptions.value = listToOption(res.rows, 'name', 'name');
});

const tableRef = shallowRef();

const rowSelection = reactive<BoTableProps['rowSelection']>({
  selectedRowKeys: [],
  onChange(selectedRowKeys) {
    rowSelection.selectedRowKeys = selectedRowKeys;
  },
});

const columns = computed<BoTableProps['columns']>(() => {
  return [
    {
      title: '项目编号',
      dataIndex: 'code',
    },
    {
      title: '项目名称',
      dataIndex: 'name',
    },
    // {
    //   title: '项目类型',
    //   dataIndex: 'type',
    //   hideInSearch: true,
    //   valueEnum: projectTypeEnum.value,
    //   valueType: 'select',
    // },
    {
      title: '项目状态',
      dataIndex: 'status',
      valueType: 'status',
      valueEnum: useStatusEnum.value,
    },
    {
      title: '场地环境描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
    {
      title: '项目图片',
      dataIndex: 'projectUrl',
      hideInSearch: true,
      customRender({ value }) {
        return <ImagePreview width={30} height={30} urls={value?.split(',')} />;
      },
    },
    {
      title: '经度',
      dataIndex: 'longitude',
      hideInSearch: true,
      customRender({ text }) {
        return Number(text).toFixed(4);
      },
    },
    {
      title: '纬度',
      dataIndex: 'latitude',
      hideInSearch: true,
      customRender({ text }) {
        return Number(text).toFixed(4);
      },
    },
    {
      title: '详细地址',
      dataIndex: 'positionAddress',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },
    {
      title: '修改人',
      dataIndex: 'updateBy',
      hideInSearch: true,
    },
    {
      title: '修改时间',
      dataIndex: 'updateTime',
      hideInSearch: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'actions',
      hideInSearch: true,
      fixed: 'right',
      actions() {
        return [
          {
            text: '编辑',
            onClick(record) {
              onEdit(record);
            },
          },
          {
            text: '删除',
            onClick(record) {
              onDelete([record.projectId]);
            },
          },
        ];
      },
    },
  ];
});

const { FormModal, open } = useFormModal({
  size: 'middle',
  column: 2,
  formProps: {
    labelCol: { style: { width: '100px' } },
    wrapperCol: { style: { width: '100%' } },
  },
});

const items = computed<BoFormProps['columns']>(() => {
  return [
    {
      title: '',
      dataIndex: '_info',
      valueType: 'input',
      colProps: { span: 24 },
      formItemRender() {
        return <div class='module-title'>项目信息</div>;
      },
    },
    {
      title: '项目编号',
      dataIndex: 'code',
      valueType: 'input',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请输入项目编号',
            trigger: 'blur',
          },
        ],
      },
      fieldProps: {
        placeholder: '请输入项目编号',
      },
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      valueType: 'input',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur',
          },
        ],
      },
      fieldProps: {
        placeholder: '请输入项目名称',
      },
    },
    {
      title: '项目类型',
      dataIndex: 'type',
      valueType: 'select',
      formItemProps: {
        // rules: [
        //   {
        //     required: true,
        //     message: '请选择项目类型',
        //   },
        // ],
      },
      fieldProps: {
        options: projectTypeOptions.value as any,
        placeholder: '请选择项目类型',
      },
    },
    {
      title: '项目状态',
      dataIndex: 'status',
      valueType: 'radio',
      fieldProps: {
        options: useStatusOptions.value as any,
      },
    },

    // {
    //   title: '预警配置',
    //   dataIndex: 'levelConfigName',
    //   valueType: 'select',
    //   fieldProps: {
    //     options: levelConfigOptions.value,
    //     placeholder: '请选择',
    //   },
    // },
    {
      title: '场地环境描述',
      dataIndex: 'description',
      valueType: 'textarea',
      formItemProps: {
        rules: [],
      },
      fieldProps: {
        placeholder: '请输入场地环境描述',
      },
    },

    {
      title: '项目图片',
      dataIndex: 'projectUrl',
      valueType: 'image',
      fieldProps: {
        async request(data) {
          const res = await uploadFile(data);
          return {
            data: { url: res.data.url },
          };
        },
        height: 100,
        width: 100,
      },
    },
    {
      title: '',
      dataIndex: '_info',
      valueType: 'input',
      colProps: { span: 24 },
      formItemRender() {
        return <div class='module-title'>位置信息</div>;
      },
    },
    {
      title: '经纬度',
      dataIndex: 'longitude',
      valueType: 'input',
      formItemProps: {
        rules: [
          {
            required: false,
            message: '请输入经纬度',
            trigger: 'blur',
          },
        ],
      },
      fieldProps: {
        placeholder: '请输入经纬度',
      },
      render(state) {
        return (
          <LonLat v-model:lon={state.longitude} v-model:lat={state.latitude} />
        );
      },
    },

    {
      title: '详细地址',
      dataIndex: 'positionAddress',
      valueType: 'input',
    },
  ];
});

const onAdd = () => {
  open({
    title: '新增',
    defaultValue: {
      status: '0',
    },
    request: async function (params: any) {
      await projectAdd(params);
      tableRef.value.refresh();
    },
  });
};

const onEdit = (record) => {
  open({
    title(modalType) {
      return modalType === 'edit' ? '编辑' : '详情';
    },
    defaultValue: {
      ...record,
    },
    modalType: 'info',
    request: async function (params: any) {
      await projectUpdate(params);
      tableRef.value.refresh();
    },
  });
};

const onDelete = (ids: (string | number)[]) => {
  Modal.confirm({
    title: '提示',
    content: '确认删除该项目吗？',
    async onOk() {
      await projectDelete(ids.join());
      tableRef.value.refresh();
    },
  });
};
</script>
